﻿<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>打印列表</title> 
  <meta name="renderer" content="webkit" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
  <link href="css/layui.css" type="text/css" rel="stylesheet" /> 
 </head> 
 <body> 
  <center style="padding-top: 40px"> 
   <a style="font-size: 25px;font-weight: 500">保安员打印人员列表 </a> 
   <br /> 
   <div style="width: 80%;padding-top: 20px"> 
    <!--以下为两个必须div元素--> 
    <div id="table"> 
     <table class="layui-table" lay-size="sm"> 
      <colgroup> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="100" /> 
       <col width="250" /> 
      </colgroup>
      <thead>
       <tr> 
        <th>id</th> 
        <th>姓名</th> 
        <th>报名id</th> 
        <th>身份证号</th> 
        <th>出生年月</th> 
        <th>地址</th> 
        <th>发证日期</th> 
        <th>保安员编号</th> 
        <th>操作</th> 
       </tr>
      </thead> 
      <tbody>
       <tr>
        <td>1</td>
        <td>马栋梁</td>
        <td>54725</td>
        <td>142635198911051615</td>
        <td>1989年11月05日</td>
        <td>山西省清徐县西谷乡东罗白村兴罗五路西北巷17号</td>
        <td>2018年06</td>
        <td>14012018001460</td>
        <td><button type="button" class="layui-btn">查看</button></td>
       </tr>
       <tr>
        <td>1</td>
        <td>马栋梁</td>
        <td>报名id</td>
        <td>身份证号</td>
        <td>出生年月</td>
        <td>地址</td>
        <td>发证日期</td>
        <td>保安员编号</td>
        <td><button type="button" class="layui-btn">查看</button></td>
       </tr> 
      </tbody>
     </table>
     <br />
    </div> 
    <div id="pageBar"></div> 
   </div> 
  </center> 
  <script type="text/javascript" src="js/jquery.min.js"></script> 
  <script type="text/javascript" src="js/layui.js"></script> 
  <script type="text/javascript" src="js/nicePage.js"></script> 
  <script type="text/javascript">
  //iframe层

	layer.open({
	  type: 2,
	  title: 'layer mobile页',
	  shadeClose: true,
	  shade: 0.8,
	  area: ['380px', '90%'],
	  content: 'mobile/' //iframe的url
	}); 
  
	//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]此种格式
	/*var json = [{
		"id": "1",
		"name": "马栋梁",
		"bm_id": "54725",
		"sfz": "142635198911051615",
		"bday": "1989年11月05日",
		"address": "山西省清徐县西谷乡东罗白村兴罗五路西北巷17号",
		"fzdata": "2018年06",
		"papers": "14012018001460",
		"cz": "打印",
	}, {
		"id": "1",
		"name": "马栋梁",
		"bm_id": "报名id",
		"sfz": "身份证号",
		"bday": "出生年月",
		"address": "地址",
		"fzdata": "发证日期",
		"papers": "保安员编号",
		"cz": "打印",
	}];

	//nameList与widthList的数组长度要一致
	var nameList = ['id', '姓名', '报名id', '身份证号', '出生年月', '地址', '发证日期', '保安员编号','操作'] //table的列名
	var widthList = [100, 100, 100, 100, 100, 100, 100, 100, 100, 250] //table每列的宽度

	/**
	 * 初始化设置nicepage组件    v1.0
	 *-------------------------------------------------------------
	 * 进行数据组装,与layui交互进行元素渲染
	 *-------------------------------------------------------------
	 * @param    {string}  table     table的div id
	 * @param    {string}  bar     底部分页的div id
	 * @param    {int}  limit     每页默认行数
	 * @param    {string}  color     底部分页的颜色
	 * @param    {array}  layout     底部分页的布局,具体可参考layui api
	 *
	 * /
	$(function () {
		nicePage.setCfg({
			table: 'table',
			//bar: 'pageBar',
			limit: 20,
			color: '#1E9FFF',
			layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
		});
	});//初始化完成
	*/
</script>  
 </body>
</html>